<template>
	<view class="refund next-recharge">
		<text class="act">代理返佣说明</text>
		<view class="lower">
			<u-row>
				<u-col class="u-col" :span="3">
					<view class="level">
						直推下级
					</view>
					<view class="percent">
						16%
					</view>
				</u-col>
				<u-col class="u-col" :span="3">
					<view class="level">
						二级下级
					</view>
					<view class="percent">
						8%
					</view>
				</u-col>
				<u-col class="u-col" :span="3">
					<view class="level">
						三级下级
					</view>
					<view class="percent">
						4%
					</view>
				</u-col>
				<u-col class="u-col" :span="3">
					<view class="level">
						四级及以上
					</view>
					<view class="percent">
						2%
					</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>
<script>
	export default {
		data(){
			return {
				
			}
		}
	}
</script>
<style lang="scss" scoped>
.refund{
	background-color: #FFFFFF;
	.lower{
		border-radius: 10rpx;
		border: 1px solid #FACA95;
		/deep/ .u-col{
			padding: 0rpx !important;
			text-align: center !important;
		}
		.level{
			padding: 10rpx 0rpx;
			color: #F25D19;
			font-size: 32rpx;
			background-color: #FFE9D0;
		}
		.percent{
			font-weight: bold;
			padding: 10rpx 0rpx;
		}
	}
}
</style>
